<template>
  <div class="statistics-page">
    <div class="left-section">
      <div class="left-top">
        <h2>{{ $t("ui.statisticsPage.totalValue") }} {{ totalValue }}</h2>
        <h2>{{ $t("ui.statisticsPage.analysisCount") }} {{ analysisCount }}</h2>
      </div>
      <h3>{{ $t("ui.statisticsPage.dataStatistics") }}</h3>
      <div class="left-bottom">
        <div class="data-item" v-for="(item, index) in dataItems" :key="index">
          <div class="upper-part">
            <img :src="getIcon(item.label)" :alt="item.label" class="icon" />
            <div class="label">{{ item.label }}</div>
          </div>
          <div class="lower-part">{{ item.value }}</div>
        </div>
      </div>
    </div>

    <div class="right-section">
      <h3>{{ $t("ui.statisticsPage.pieChart") }}</h3>
      <PieChart :data="chartData" />
    </div>
  </div>
</template>

<script lang="ts">
import axios from "axios";
import { defineComponent, ref, onMounted, watch } from "vue";
import PieChart from "@/components/PieChart.vue";
import { useI18n } from "vue-i18n"; // 引入 useI18n
import { TrafficDataItem } from "@/types/mockTypes";

interface DataItem {
  label: string;
  value: number;
}

export default defineComponent({
  components: {
    PieChart,
  },
  setup() {
    const { t, locale } = useI18n(); // 获取 t 函数和 locale

    // 使用 ref 创建响应式数据
    const totalValue = ref(100); // 假设的今日综合值
    const analysisCount = ref(50); // 假设的今日分析路数
    const dataItems = ref<DataItem[]>([]); // 初始化为空

    // const initializeDataItems = () => {
    //   dataItems.value = [
    //     { label: t("ui.statisticsPage.labels.pedestrian"), value: 30 },
    //     { label: t("ui.statisticsPage.labels.car"), value: 40 },
    //     { label: t("ui.statisticsPage.labels.bike"), value: 15 },
    //     { label: t("ui.statisticsPage.labels.trike"), value: 10 },
    //     { label: t("ui.statisticsPage.labels.face"), value: 5 },
    //   ];
    // };
    const getTrafficData = async () => {
      try {
        const response = await axios.get("/mock/trafficData");
        console.log(response.data);
        const trafficData = response.data.data; // 获取数据数组

        trafficData.forEach((item: TrafficDataItem) => {
          const labelEn = item.label_en;
          const labelCn = item.label_cn;
          const value = item.value;
          // 使用 labelEn 和 labelCn，根据需要选择中英文显示
          console.log(`英文标签: ${labelEn}, 中文标签: ${labelCn}, 数量: ${value}`);
        });
        dataItems.value = trafficData.map((item: TrafficDataItem) => ({
          label: t(`ui.statisticsPage.labels.${item.label_en}`),
          value: item.value
        }));
        // // 提取 data 域
      } catch (error) {
        console.error("获取照片数据时发生错误:", error);
      }
    }
    onMounted(async () => {
      // initializeDataItems(); // 初始化数据项
      getTrafficData();
    });
    // 监视语言变化，更新数据项
    watch(locale, () => {
      // initializeDataItems();
      getTrafficData();
    });
    return {
      totalValue,
      analysisCount,
      dataItems,
      getTrafficData,
      t,
    };
  },
  computed: {
    chartData(): { name: string; value: number }[] {
      // 指定返回类型
      return this.dataItems.map((item) => ({
        name: item.label,
        value: item.value,
      }));
    },
  },
  methods: {
    getIcon(label: string) {
      const { t } = useI18n(); // 获取 t 函数
      console.log(`label = ${label}`);
      switch (label) {
        case t("ui.statisticsPage.labels.pedestrian"):
          return require("@/assets/icon/icon_pedestrian.png");
        case t("ui.statisticsPage.labels.car"):
          return require("@/assets/icon/icon_car.png");
        case t("ui.statisticsPage.labels.bike"):
          return require("@/assets/icon/icon_bike.png");
        case t("ui.statisticsPage.labels.trike"):
          return require("@/assets/icon/icon_trike.png");
        case t("ui.statisticsPage.labels.face"):
          return require("@/assets/icon/icon_face.png");
        default:
          return "default_icon.png"; // 默认图标
      }
    },
  },
});
</script>

<style scoped>
.statistics-page {
  display: flex;
  justify-content: space-between;
}

.left-section {
  width: 60%;
  padding: 20px;
  border-right: 1px solid #e0e0e0;
}

.left-top {
  margin-bottom: 20px;
}

.left-bottom {
  margin-top: 20px;
  flex-wrap: wrap;
  display: flex;
  justify-content: flex-start;
}

.data-item {
  /* background-color: #000000; */
  border: 1px solid #366fe1;
  border-radius: 8px;
  overflow: hidden;
  display: flex;
  height: 150px;
  margin: 5px 5px;
  flex: 0 0 30%;
  flex-direction: column;
  box-sizing: border-box;
  /* 包含内边距和边框在内的宽度计算 */
}

.upper-part {
  flex: 0 0 85%;
  /* 上半部分占85% */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: var(--info-color);
  /* color: #366fe1; */
  /* padding: 10px; */
}

.lower-part {
  flex: 0 0 15%;
  /* 下半部分占15% */
  display: flex;
  align-items: center;
  justify-content: center;
  /* font-size: 1.5em; */
  color: #ccc;
  background-color: #366fe1;
}

.right-section {
  width: 35%;
  padding: 20px;
}
</style>
